<template>
    <div class="main">
      <div class="chefInfo" >
        <a href="#">
          <img src="../../../../static/images/chefImgs/1.jpg">
        </a>
      </div>
      <div class="divspan">
          <span>名字:李大厨</span>
          <span>个人介绍:擅长干锅系列，纸锅系列，铁板系列等等，合理搭配原料，使之顾客品之回味无穷。</span>
          <span>联系方式:198****5245</span>
          <span>地址:四川省成都市成华区迎晖路** </span>
      </div>
    </div>
</template>

<script>
  import api from "../../../../axios/api";

    export default {
        name: "introduce",
      data(){
          return{
            chefs:[]
        }
      },
      methods: {
        setDataFromAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios( "/api/chefController/getAllChef/"+this.restaurant.rno, null, "post")
          api.setDataFromAxios("/chefImg", null, "post")
            .then(res => {
              // console.log(res)
              this.chefs = res;
              console.log(res)
              // console.log(this.chefs.name)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      created() {
        this.setDataFromAxios();
      }
    }
</script>

<style scoped lang="stylus">
  .main
    content:""
    display:block
    clear:both  // 给父元素添加伪类清除浮动
    margin 0 auto
    width 1020px
    height 310px
    .chefInfo
      margin 10px 0 0 20px;
      text-align center
      float left
      width 200px
      height 277px
      position: relative
      overflow: hidden
      border-radius 10px
      img
        width:200px
        height :277px
    .divspan
       margin-top 90px
       width 735px
       height 275px
       float right
       display table
       position relative

       span
         display: block
         font-size 18px
    .xiaodan
      position absolute
      left 500px
      top 250px







</style>
